import '@arcgis/core/assets/esri/themes/light/main.css'
import Vue from 'vue'

export default class GtToolTipBox {
    constructor(view, location, vueComponent) {
        this.destroyed = false
        this.view = view
        this.location = location
        this.vueComponent = vueComponent

        const div = document.createElement('div')

        div.style.position = 'absolute'

        view.container.append(div)

        // eslint-disable-next-line no-new
        const component = new Vue({
            render: h => h('div', {
                style: {
                    position: 'absolute'
                }
            }, [h(vueComponent)])
        }).$mount(div)

        this.container = component.$el
        this.component = component

        this.updateLocation()
    }

    updateLocation () {
        const screenPoint = this.view.toScreen(this.location)
        if (!screenPoint) {
            return
        }
        // this.container.style.top = screenPoint.y + 'px'
        this.container.style.left = screenPoint.x - this.container.offsetWidth / 2 - 3 +  'px'
        this.container.style.bottom = this.view.container.clientHeight - screenPoint.y + 20 + 'px';

        if (!this.destroyed) {
            requestAnimationFrame(() => this.updateLocation())
        }
    }

    destory () {
        this.destroyed = true
        this.component.$destroy()
        this.container.remove()
    }

    setVisible (visible) {
        this.container.style.display = visible ? 'block' : 'none'
    }
}